<template>
    <div class="wrap">
        <!--banner-->
        <div class="bannerWrap">
            <div class="banner">
                <el-row type="flex" justify="space-between">
                    <el-col :span="3"></el-col>
                    <el-col :span="18" class="page1Content">
                        <el-row>
                            <el-col :span="9" :offset="2" style="padding-top: 1%;">
                                <img src="../assets/img/banner/logo2.png" alt="" style="width:70%;padding-right: 18%"/>
                                <p class="content">
                                    The team deeply ploughs into the global market and provides one-stop
                                    marketing solutions for Chinese enterprises. Advertising business
                                    covers the world's most mainstream media, such as Facebook / line /
                                    Google / tiktok, etc., and is committed to tailor-made marketing
                                    solutions with the highest transformation for customers, serving e-
                                    commerce, game, application and other enterprises
                                </p>
                            </el-col>
                            <el-col :span="9" :offset="1">
                                <img src="../assets/img/banner/banner.png" alt="" class="bannerImg"/>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="3"></el-col>
                </el-row>
            </div>
        </div>
        <!--服务优势 facebook 月活用户-->
        <div class="page" style="padding-top: 80px;">
            <el-row type="flex" justify="space-between">
                <el-col :span="3"></el-col>
                <el-col :span="18" class="page1">
                    <div class="imgTitle" style="width: 445px;margin: 0 auto;">
                        <img src="../assets/img/page1/Service_advantage@2x.png" alt=""/>
                    </div>
                    <div class="littleTitle">High quality resources</div>
                    <div class="type">Facebook Mau</div>
                    <div class="typeIntro">
                        Relying on Facebook's big data marketing, it can accurately connect users' needs with buyers,
                        and it also has a rebate policy and one-to-one service
                    </div>
                    <el-row class="imgWrap">
                        <el-col :span="24" class="facebookBox">
                            <img src="../assets/img/page1/facebook.svg" alt=""/>
                            <img src="../assets/img/page1/facebook_logo.svg" alt="" class="logo"/>
                            <img src="../assets/img/page1/facebook_number_en.svg" alt="" class="num"/>
                            <img src="../assets/img/page1/facebook_phone.png" alt="" class="phone"/>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="3"></el-col>
            </el-row>
        </div>
        <!--Line 用户量级-->
        <div class="page" style="background: rgba(231, 241, 253, .5);padding-top: 90px;">
            <el-row type="flex" justify="space-between">
                <el-col :span="3"></el-col>
                <el-col :span="18" class="page2">
                    <div class="type">Line User</div>
                    <div class="typeIntro">
                        Intelligent accurate delivery, intelligent learning delivery optimization, big data analysis
                        service, more intelligent information application control center
                    </div>
                    <el-row class="imgWrap">
                        <el-col :span="24" class="lineBox">
                            <img src="../assets/img/page2/line.png" alt=""/>
                            <img src="../assets/img/page2/line_number_en1.svg" alt="" class="num"/>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="3"></el-col>
            </el-row>
        </div>
        <!--Google 流量源-->
        <div class="page" style="padding: 90px 0 120px;">
            <el-row type="flex" justify="space-between">
                <el-col :span="3"></el-col>
                <el-col :span="18" class="page3">
                    <div class="type">Google Traffic Sources</div>
                    <div class="typeIntro" style="margin-bottom: 64px;">
                        google Big data marketing covers the users you want to find multi-channel parallel coverage of
                        overseas quality traffic
                    </div>
                    <el-row class="imgWrap" type="flex" justify="center">
                        <el-col :span="9">
                            <img src="../assets/img/page3/google.png" alt=""/>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="3"></el-col>
            </el-row>
        </div>
        <!--优势-->
        <div class="page" style="background: black">
            <el-row type="flex" justify="space-between">
                <el-col :span="3"></el-col>
                <el-col :span="18" class="page4">
                    <el-row type="flex" justify="center">
                        <el-col :span="8" style="position: relative;z-index: 100">
                            <div class="left">
                                <div class="logoWrap">
                                    <img src="../assets/img/page4/tiktok_logo@2x.png" alt="" class="logo"/>
                                    <img src="../assets/img/page4/tiktok@2x.png" alt="" class="logoText"/>
                                    <span class="advantage">Advantage</span>
                                </div>
                                <p class="advantage">
                                    Tiktok is overseas version of TikTok, and has a wide range of user groups in many
                                    overseas countries and regions such as Japan, Korea, India, Thailand, the United
                                    States, Russia and Taiwan
                                </p>
                                <ul class="advantage">
                                    <li>
                                        Large scale and wide distribution of users
                                    </li>
                                    <li>
                                        Strong stickiness
                                    </li>
                                    <li>
                                        Accurate advertising orientation
                                    </li>
                                    <li>
                                        Cost-effective
                                    </li>
                                    <li>
                                        Excellent advertising experience
                                    </li>
                                </ul>
                            </div>
                        </el-col>
                        <el-col :span="10" style="position: relative;z-index: 1">
                            <img src="../assets/img/page4/Advantage@2x.png" alt="" class="right"/>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="3"></el-col>
            </el-row>
        </div>
        <!--运营商（海外增值服务提供商）-->
        <div class="page" style="padding: 90px 0 0;">
            <el-row type="flex" justify="space-between">
                <el-col :span="3"></el-col>
                <el-col :span="18" class="page5">
                    <div class="type" style="margin-bottom: 0;">Operators (Overseas Value-added service Providers)</div>
                    <el-row class="imgWrap">
                        <el-col :span="24" class="OperatiorsBox">
                            <img src="../assets/img/page5/Operatiors_en.png" alt=""/>
                            <div class="OperatiorsCon">
                                <el-row type="flex" justify="space-around">
                                    <el-col :span="8">
                                        <div class="leftCon">
                                            <div class="conTitle">Covers many countries:</div>
                                            <p class="conText">
                                                it mainly serves tens of millions of users in Southeast Asia and The
                                                Middle East and Europe, and its landing offices in various countries
                                                directly connect with operators. It has rich operator resources and
                                                local advantages overseas, which can help CP to send high-quality
                                                content resources to sea and achieve high returns through operator
                                                channels
                                            </p>
                                        </div>
                                    </el-col>
                                    <el-col :span="4">
                                        <div class="centerCon">
                                            <div class="conTitle">High quality channel traffic:</div>
                                            <p class="conText">
                                                Committed to mobile business promotion service, achieved the best
                                                promotion effect by obtaining high quality traffic from Google and FB
                                            </p>
                                        </div>
                                    </el-col>
                                    <el-col :span="8">
                                        <div class="rightCon">
                                            <div class="conTitle">High-quality content:</div>
                                            <p class="conText">
                                                As a high-quality content service provider, it integrates high-quality
                                                content resources, including games, videos, music, pictures, animation
                                                and other resources, and can provide users with games, entertainment,
                                                audio-visual, dating information and other services
                                            </p>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="3"></el-col>
            </el-row>
        </div>
        <!--海外业务团队优势-->
        <div class="page" style="background: rgba(231, 241, 253, .5);">
            <el-row type="flex" justify="space-between">
                <el-col :span="3"></el-col>
                <el-col :span="18" class="page6">
                    <el-row class="imgWrap" type="flex" justify="start">
                        <el-col :span="9">
                            <img src="../assets/img/page6/illustrator.png" alt=""/>
                        </el-col>
                        <el-col :span="14" :offset="1" style="padding-top: 7%;">
                            <el-row>
                                <el-col :span="20">
                                    <div class="imgTitle" style="width: 100%;">
                                        <img src="../assets/img/page6/Business_Team_Advantages@2x.png" alt=""/>
                                    </div>
                                </el-col>
                            </el-row>
                            <p>
                                There are about 23 million people in Taiwan. The team has more than 10 years of overseas
                                business experience. The team elite comes from avazu / cheetah / Baidu / Huawei, and has
                                made great achievements in mobile applications / Games / cross-border e-commerce
                            </p>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="3"></el-col>
            </el-row>
        </div>
        <!--成功案例-->
        <div class="page" style="padding: 78px 0 150px;">
            <el-row type="flex" justify="space-between">
                <el-col :span="3"></el-col>
                <el-col :span="18" class="page7">
                    <el-row class="imgWrap">
                        <div class="imgTitle" style="width: 115px;margin: 0 auto;">
                            <img src="../assets/img/page7/Case@2x.png" alt=""/>
                        </div>
                        <el-carousel indicator-position="none" height="480px" :interval="5000" style="margin-top: 54px;width: 100%">
                            <el-carousel-item>
                                <el-col class="example" style="padding: 0 80px;">
                                    <el-row type="flex" justify="space-between">
                                        <el-col :span="7" style="display: flex;align-items: flex-end;">
                                            <img src="../assets/img/page7/eLong@2x.png" alt="" style="width: 95%;"/>
                                        </el-col>
                                        <el-col :span="15" :offset="2" style="padding-top: 65px;" class="yl">
                                            <p class="bigT">eLong</p>
                                            <p class="smallT">Tactics</p>
                                            <p class="content">
                                                In the process of launching Yilong travel, almost domestic top
                                                developers (such as Baidu, 360, jiubang, etc.) were collected to push
                                                advertisements in the form of in app. This kind of traffic accounted for
                                                about 50%. The remaining 40% of the traffic used its own DSP platform
                                                and its own mediabuy team, and the remaining 10% was put to the most
                                                experienced and powerful personal channel. The multi pronged approach
                                                has achieved good results
                                            </p>
                                            <p class="smallT">Result</p>
                                            <p class="content">
                                                By the end of the summer vacation of 17 years, the daily delivery level
                                                of elong has been stable between 2000-3000. After targeted optimization
                                                according to customer demand, the overall quality level of our company
                                                is stable between 1-2
                                            </p>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-carousel-item>
                            <el-carousel-item>
                                <el-col class="example">
                                    <el-row type="flex" justify="space-between">
                                        <el-col :span="9" style="display: flex;align-items: flex-end;">
                                            <img src="../assets/img/page7/Hornet_Nest@2x.png" alt=""
                                                 style="display: block;width: 95%;"/>
                                        </el-col>
                                        <el-col :span="15" style="padding-top: 65px;" class="yl">
                                            <p class="bigT">Hornet's Nest</p>
                                            <p class="smallT">Tactics</p>
                                            <p class="content">
                                                As an OTA product, according to the data analysis in China, hornet's
                                                nest has a certain level of magnitude in Android and IOS, but it still
                                                has a great potential for competing products. In 2018, Ma cellular is
                                                expected to increase 30 million users, so the promotion efforts will be
                                                further strengthened. We provide support for the increment. Firstly, we
                                                conduct user demand analysis and competitive product analysis for major
                                                hotels, and conduct benchmark test on IOS / Android platform based on
                                                our own team and resource advantages
                                            </p>
                                            <p class="smallT">Result</p>
                                            <p class="content">
                                                After the IOS test is stable, the daily average is increased to
                                                2500-3500, and after the Android test is stable, the daily average is
                                                increased to 3000-4000
                                            </p>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-carousel-item>
                            <el-carousel-item>
                                <el-col class="example" style="padding: 0 80px;align-items: baseline">
                                    <el-row type="flex" justify="space-between" style="width: 100%;">
                                        <el-col :span="7" style="display: flex;">
                                            <img src="../assets/img/page7/zetianji.png" alt=""
                                                 style="padding-top: 20px;"/>
                                        </el-col>
                                        <el-col :span="15" :offset="2" style="padding-top: 11%;" class="yl">
                                            <p class="bigT">game</p>
                                            <p class="smallT">Choise</p>
                                            <p class="content">
                                                "Selected Sky" mobile game is the first 3DMMO mobile game masterpiece
                                                independently developed by Sanqi Interactive Entertainment, which is
                                                adapted from the novel of the same name by the author of the Tencent
                                                Literature. Perfectly restore the characters, plots and scenes of TV
                                                novels. In the world of coexistence of demon and demon, Chen Changsheng
                                                opened a grand prologue. The players will appear as longevity brothers
                                                and sisters, accompanied by a group of like-minded friends. Longevity
                                                practice changes life, witnessing its growth path
                                            </p>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-carousel-item>
                            <el-carousel-item>
                                <el-col class="example" style="padding: 0 80px 0 0;align-items: center">
                                    <el-row type="flex" justify="space-between">
                                        <el-col :span="7" style="display: flex;">
                                            <img src="../assets/img/page7/zhuxian.png" alt=""
                                                 style="width: 125%;margin-left: -20%;"/>
                                        </el-col>
                                        <el-col :span="15" :offset="2" style="padding-top: 6%;" class="yl">
                                            <p class="bigT">game</p>
                                            <p class="smallT">Zhu Xian</p>
                                            <p class="content">
                                                "Zhu Xian Mobile Games" is a 3DMMORPG Xianxia mobile game developed and
                                                developed by Perfect World (Beijing) Software Technology Development
                                                Co., Ltd. The work was officially tested on August 10, 2016
                                                "Zhu Xian Mobile Games" part of the scene, human settings, gameplay and
                                                many other aspects, still use the "Zhu Xian" end game design, let Zhu
                                                Xian IP fans relive the feelings of the past experience
                                                The work is based on the mythological story of the fairy tale "Zhu Xian"
                                                by Xiao Ding, which tells the story of the ghost king trying to
                                                resurrect the beast and subvert Qingyun
                                                Black Shark
                                            </p>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-carousel-item>
                            <el-carousel-item>
                                <el-col class="example" style="padding: 0 80px;align-items: baseline">
                                    <el-row type="flex" justify="space-between" style="width: 100%;">
                                        <el-col :span="7">
                                            <img src="../assets/img/page7/heisha.png" alt=""
                                                 style="padding-top: 20px;"/>
                                        </el-col>
                                        <el-col :span="15" :offset="2" style="padding-top: 11%;" class="yl">
                                            <p class="bigT">Black Shark</p>
                                            <p class="smallT"></p>
                                            <p class="content">
                                                Place of delivery: Southeast Asia + Asia <br>
                                                Delivery time: November 2019 to present<br>
                                                Service consumption: 10W+USD<br>
                                                Advertising goals: sprint for the peak season of e-commerce (Double
                                                Eleven, press conference, etc.), participate in the brand upgrade launch
                                                plan, and increase brand display traffic
                                                Delivery plan: Brand videos, display ads and keyword search ads on
                                                Google/Youtobe
                                            </p>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-carousel-item>
                            <el-carousel-item>
                                <el-col class="example" style="padding: 0 80px;align-items: baseline">
                                    <el-row type="flex" justify="space-between" style="width: 100%;">
                                        <el-col :span="7" style="display: flex;">
                                            <img src="../assets/img/page7/cheboshi.png" alt=""
                                                 style="padding-top: 20px;width: 100%;"/>
                                        </el-col>
                                        <el-col :span="15" :offset="2" style="padding-top: 11%;" class="yl">
                                            <p class="bigT">Autodoc</p>
                                            <p class="smallT">Dr. Che</p>
                                            <p class="content">
                                                Application Category: Shopping (application)<br>
                                                Delivery area: Europe (mainly Germany, Spain, France, Sweden,
                                                Switzerland, Netherlands)<br>
                                                Delivery time: 2018 cooperation till now<br>
                                                Main business: online auto parts sales
                                            </p>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-carousel-item>
                        </el-carousel>
                    </el-row>
                </el-col>
                <el-col :span="3"></el-col>
            </el-row>
        </div>
        <!--合作伙伴-->
        <div class="page" style="background: rgba(231, 241, 253, .5);padding: 81px 0 90px;">
            <el-row type="flex" justify="space-between">
                <el-col :span="3"></el-col>
                <el-col :span="18" class="page8">
                    <div class="imgTitle" style="width: 290px;margin: 0 auto 21px;">
                        <img src="../assets/img/page8/Cooperation@2x.png" alt=""/>
                    </div>
                    <el-row class="imgWrap" type="flex" align="middle" justify="center">
                        <el-col :span="24">
                            <img src="../assets/img/page8/cooperation.png" alt=""/>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="3"></el-col>
            </el-row>
        </div>
        <!--联系我们-->
        <div class="page" style="background: black;padding: 55px 0 152px;">
            <el-row type="flex" justify="space-between">
                <el-col :span="3"></el-col>
                <el-col :span="18" class="page9">
                    <div class="imgTitle" style="width: 254px;margin:0 auto 21px;color: #fff">
                        <img src="../assets/img/page9/contact_us@2x.png" alt=""/>
                    </div>
                    <div class="contactUs">
                        <img src="../assets/img/page9/contact_us_pic@2x.png" alt=""/>
                        <div>
                            <div class="contactUs_box">
                                <el-icon size="20">
                                    <Message/>
                                </el-icon>
                                <span>suki@silution.cn，kluas@silution.cn </span>
                            </div>
                            <div class="contactUs_box">
                                <el-icon size="20">
                                    <Location/>
                                </el-icon>
                                <span>Unit 20, Kaysone Phomvihane Avenue, Ban Phakhao, Xaythani District, Vientiane, Lao PDR</span>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="3"></el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import animate from "@/assets/animate";
import {
    Location,
    Message,
} from "@element-plus/icons-vue";

export default {
    data() {
        return {
            animate: animate,
        };
    },
    components: {
        Location,
        Message,
    },
    mounted() {
        try {
            setTimeout(() => {
                this.scrollFun();
                window.addEventListener("scroll", this.scrollFun, true);
            }, 200);
        } catch (e) {
            console.log(e);
        }
    },
    methods: {
        scrollFun() {
            this.animate(document.getElementsByClassName("content")[0], "fadeInUp");
            document.querySelectorAll(".imgTitle").forEach(item => {
                this.animate(item, "fadeInUp", true);
            });
            document.querySelectorAll(".littleTitle").forEach(item => {
                this.animate(item, "fadeInUp", true);
            });
            document.querySelectorAll(".typeIntro").forEach(item => {
                this.animate(item, "fadeInUp", true);
            });
            document.querySelectorAll(".advantage").forEach(item => {
                this.animate(item, "fadeInUp", true);
            });
            document.querySelectorAll("img").forEach((item, index) => {
                if (index !== 2) {
                    this.animate(item, "fadeInUp", true);
                }
            });
            this.animate(document.getElementsByClassName("bannerImg")[0], "smallFadeInUp");
        }
    },
    beforeUnmount() {
        window.removeEventListener("scroll", this.scrollFun);
    }
};
</script>

<style lang="scss" scoped>
@import "../assets/page.scss";

.page4 {
    .left {
        ul {
            display: flex;
            flex-direction: column;
            width: 450px;

            li {
                display: flex;
                align-items: center;
                width: 100%;
                height: 60px;
                margin-bottom: 30px;
                font-size: 16px;
                color: #FFFFFF;
                letter-spacing: 0.27px;
                text-align: justify;

                &:nth-child(1) {
                    padding-left: 85px;
                    background: url("../assets/img/page4/1en.png");
                    background-size: 100% 100%;
                }

                &:nth-child(2) {
                    padding-left: 52%;
                    align-self: flex-end;
                    background: url("../assets/img/page4/2en.png");
                    background-size: 100% 100%;
                }

                &:nth-child(3) {
                    padding-left: 85px;
                    background: url("../assets/img/page4/3en.png");
                    background-size: 100% 100%;
                }

                &:nth-child(4) {
                    padding-left: 54%;
                    align-self: flex-end;
                    background: url("../assets/img/page4/4en.png");
                    background-size: 100% 100%;
                }

                &:nth-child(5) {
                    padding-left: 85px;
                    margin-bottom: 0;
                    background: url("../assets/img/page4/5en.png");
                    background-size: 100% 100%;
                }
            }
        }
    }
}

.contactUs_box {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    margin-bottom: 12px;

    span {
        text-align: left;
        margin-left: 5px;
    }
}

</style>
